
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/mobile/templates/blankPageTemp.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pm="http://primefaces.org/mobile" 
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j">

    <ui:define name="page">

        <f:facet name="postinit">                        
            <h:outputStylesheet library="primefaces-mobile" name="calendar/calendar.css"  />
            <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />            

            <script type="text/javascript">
                (function($) {
                    $.mobiscroll.i18n['pt_BR'] = $.extend($.mobiscroll.i18n['pt_BR'], {
                        dateFormat: 'dd/mm/yy',
                        dateOrder: 'ddMMyy',
                        dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
                        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                        dayText: 'Dzień',
                        hourText: 'Godzina',
                        minuteText: 'Minuty',
                        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                        monthText: 'Miesiąc',
                        secText: 'Segundo',
                        timeFormat: 'HH:ii',
                        timeWheels: 'HHii',
                        yearText: 'Rok',
                        setText: 'Wybierz',
                        cancelText: 'Anuluj',
                        nowText: 'Agora'
                    });
                })(jQuery);
            </script>
        </f:facet>   
        <pm:view id="wiz1">
            <pm:header title="Rezerwacja">             
                <f:facet name="left"><p:button value="Wróć" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>
            <pm:content>


                <h:form id="p1">
                    <h:outputText value="Data rozpoczęcia parkowania:" />
                    <p:calendar id="start" value="#{userWizard.startDate}" pattern="MM/dd/yyyy HH:mm" locale="pt_BR"></p:calendar>
                    <h:outputText value="Data zakończenia parkowania:" />
                    <p:calendar id="end" value="#{userWizard.endDate}" pattern="MM/dd/yyyy HH:mm" locale="pt_BR"></p:calendar>

                    <pm:field id="select">
                        <h:outputLabel  value="Typ stanowiska: "/>
                        <h:selectOneMenu required="true" value="#{userWizard.spaceType}" style="width: 100%;">  
                            <p:ajax event="change" update=":p2h:lista, :p3h:listaS" process="p1" >

                            </p:ajax>
                            <f:selectItem itemLabel="#{bundle['passes.choose']}"  itemValue=""/>  
                            <f:selectItem itemLabel="#{bundle['car.typePersonal']}" itemValue="Personal"/>  
                            <f:selectItem itemLabel="#{bundle['car.typeTrailer']}" itemValue="Trailer"/>  
                            <f:selectItem itemLabel="#{bundle['car.typeMotorcycle']}" itemValue="Motorcycle"/>  
                            <f:selectItem itemLabel="#{bundle['car.typeVan']}" itemValue="Van"  />  



                        </h:selectOneMenu>  
                    </pm:field>
                </h:form>
                <p:button value="Dalej" href="#wiz2?transition=slide" />
            </pm:content>
        </pm:view>
        <pm:view id="wiz2">

            <pm:header title="Stanowisko">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="p2h">
                    <p:dataList id="lista"  value="#{userWizard.avalivableSpaces}" var="space"> 
                        <f:facet name="header" >Wybierz miejsce dla siebie</f:facet>                                                                                            

                        <p:commandLink  action="pm:wiz3" styleClass="selection" value="Numer: #{space.number} Typu: #{userWizard.getSpaceLabelFromValue(space)}" update=":p4h:listaSA">
                            <f:setPropertyActionListener value="#{space}" target="#{userWizard.selectedSpace}" />
                            <f:setPropertyActionListener value="true" target="#{userWizard.mobilePreRenderEnabler}"  />
                        </p:commandLink>    




                    </p:dataList>                
                </h:form> 
            </pm:content>
        </pm:view>   

        <pm:view id="wiz3">
            <pm:header title="Pojazd">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <p:commandLink  action="pm:new" styleClass="selection" value="Dodaj nowy" >
                        <f:setPropertyActionListener value="2" target="#{userWizard.radioOptions}" />

                    </p:commandLink>                   

                    <p:commandLink  action="pm:old" styleClass="selection" value="Wybierz z istniejących" >
                        <f:setPropertyActionListener value="1" target="#{userWizard.radioOptions}" />

                    </p:commandLink> 
                </p:dataList>

            </pm:content>
        </pm:view>   

        <pm:view id="new">
            <pm:header title="Pojazd">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>


                <h:form id="newCar">
                    <h:outputText value="#{bundle['passes.numberPlate']}"  />  

                    <p:inputText value="#{userWizard.carPlate}" placeholder="#{bundle['passes.plateTip']}" >
                        <f:validateLength maximum="10" />  
                    </p:inputText>

                    <h:outputText value="#{bundle['passes.make']}" />  

                    <p:inputText value="#{userWizard.carMake}" placeholder="#{bundle['passes.makeTip']}">
                        <f:validateLength maximum="20"  />  
                    </p:inputText>

                    <h:outputText value="#{bundle['passes.model']}" />  

                    <p:inputText value="#{userWizard.carModel}" placeholder="#{bundle['passes.modelTip']}" >
                        <f:validateLength maximum="50"  />  
                    </p:inputText>
                    <pm:field id="select">
                        <h:outputLabel  value="Typ pojazdu: "/>
                        <h:selectOneMenu required="true" value="#{userWizard.carType}" style="width: 100%;">  
                            <p:ajax event="change"  process="newCar" >

                            </p:ajax>
                            <f:selectItem itemLabel="#{bundle['passes.choose']}"  itemValue=""/>  
                            <f:selectItem  rendered="#{userWizard.spaceType =='Personal' or userWizard.spaceType =='All' or userWizard.spaceType =='Special' }" itemLabel="#{bundle['car.typePersonal']}" itemValue="Personal"/>  
                            <f:selectItem  rendered="#{userWizard.spaceType =='Trailer' or userWizard.spaceType =='All' or userWizard.spaceType =='Special' }" itemLabel="#{bundle['car.typeTrailer']}" itemValue="Trailer"/>  
                            <f:selectItem rendered="#{userWizard.spaceType =='Motorcycle' or userWizard.spaceType =='All' or userWizard.spaceType =='Special' }" itemLabel="#{bundle['car.typeMotorcycle']}" itemValue="Motorcycle"/>  
                            <f:selectItem  rendered="#{userWizard.spaceType =='Van' or userWizard.spaceType =='All' or userWizard.spaceType =='Special' }"  itemLabel="#{bundle['car.typeVan']}" itemValue="Van"  />  


                        </h:selectOneMenu>  
                    </pm:field>
                </h:form>

                <p:button value="Dalej" href="#wiz4?transition=slide" />
            </pm:content>
        </pm:view>

        <pm:view id="old">
            <pm:header title="Pojazd">
                <f:facet name="left"><p:button value="Wróć" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>

            <pm:content>
                <h:form id="p3h">
                    <p:dataList id="listaS"  value="#{userWizard.carsByClient}" var="car"> 
                        <f:facet name="header" >Wybierz jeden ze swoich pojazdów</f:facet>                                                                                            

                        <p:commandLink  action="pm:wiz4" styleClass="selection" value="#{car.make} #{car.model} rejestracja:#{car.numberPlate}">
                            <f:setPropertyActionListener value="#{car.carId}" target="#{userWizard.choosenCarId}" />
                        </p:commandLink>    




                    </p:dataList>                
                </h:form>
            </pm:content>
        </pm:view>   



        <pm:view id="wiz4">
            <pm:header title="Rachunek">
                <f:facet name="left"><p:button value="Wróć" icon="back" onclick="PrimeFaces.back()"/></f:facet>

                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <p:commandLink  action="pm:wiz5" styleClass="selection" value="Użyj moich danych klienta" update=":wiz5">
                        <f:setPropertyActionListener value="1" target="#{userWizard.accMobile}" />
                    </p:commandLink>               

                    <p:commandLink  action="pm:selectAcc" styleClass="selection" value="Wybierz z istniejących">
                        <f:setPropertyActionListener value="2" target="#{userWizard.radioOptionsACC}" />
                    </p:commandLink> 
                    <p:commandLink  action="pm:newAcc" styleClass="selection" value="Dodaj nowe" >
                        <f:setPropertyActionListener value="3" target="#{userWizard.radioOptionsACC}" />
                    </p:commandLink> 
                </p:dataList>

            </pm:content>
        </pm:view>   

        <pm:view id="selectAcc">
            <pm:header title="Rachunek">
                <f:facet name="left"><p:button value="Wróć" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>
            <pm:content>
                <h:form id="p4h">
                    <p:dataList id="listaSA"  value="#{accountingDataBean.allByClient}" var="acc"> 
                        <f:facet name="header" >Wybierz dane do rachunku</f:facet>                                                                                            

                        <p:commandLink  action="pm:wiz5" styleClass="selection" value="#{acc.name} #{acc.nipNumber} typu:#{accountingDataBean.getLabelFromPayerValue(acc)}" update=":wiz5" >
                            <f:setPropertyActionListener value="#{acc}" target="#{userWizard.selectedAcc}"  />
                        </p:commandLink>    

                    </p:dataList>                
                </h:form>
            </pm:content>
        </pm:view>   
        <pm:view id="newAcc" >
            <pm:header title="Rachunek">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>
            <pm:content>

                <h:form id="newAccForm">

                    <h:outputText value="#{bundle['accounting.name']}" />  
                    <p:inputText id="na" value="#{userWizard.accName}" >  

                    </p:inputText>



                    <h:outputText value="#{bundle['accounting.city']}" />  
                    <p:inputText id="cit" value="#{userWizard.accCity}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.zip']}" />  
                    <p:inputText id="zips" value="#{userWizard.accZip}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.street']}" />  
                    <p:inputText id="str" value="#{userWizard.accStreet}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.house']}" />  
                    <p:inputText id="hou" value="#{userWizard.accHouse}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.local']}" />  
                    <p:inputText id="loc" value="#{userWizard.accLocal}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.nip']}" />  
                    <p:inputText id="nip" value="#{userWizard.accNip}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.phone']}" />  
                    <p:inputText id="pho" value="#{userWizard.accPhone}" >  

                    </p:inputText>


                    <h:outputText value="#{bundle['accounting.type']}"/>  
                    <h:selectOneMenu value="#{userWizard.accPayerType}" style="width: 100%;">  
                        <p:ajax event="change" update=":wiz5" process="newAccForm" listener="#{userWizard.setChosenValuesProt()}" />
                        <f:selectItems value="#{accountingDataBean.payerOptions}"  />  

                    </h:selectOneMenu>  
                    <p:button value="Dalej" href="#wiz5"/>
                </h:form>

            </pm:content>
        </pm:view> 

        <pm:view id="wiz5" >

            <pm:header title="Podsumowanie">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <f:facet name="right"><p:button value="Anuluj" icon="delete" href="/mobile/index.xhtml"/></f:facet>
            </pm:header>

            <pm:content >

                <p:panel header="Przepustka" >  
                    <h:panelGrid columns="2" cellpadding="10"> 
                        <h:outputLabel value="#{bundle['reservation.space']}"/>
                        <h:outputText value="#{userWizard.selectedSpace.number}"/> 
                        <h:outputLabel value="#{bundle['reservation.from']}"/>
                        <h:outputText value="#{userWizard.startDateForUser}"/> 
                        <h:outputLabel value="#{bundle['reservation.to']}"/>
                        <h:outputText value="#{userWizard.endDateForUser}"/> 
                        <h:outputLabel value="Typ stanowiska:"/>
                        <h:outputText value="#{userWizard.spaceTypeForUser}"/> 
                    </h:panelGrid>
                </p:panel>

                <p:panel header="Pojazd">
                    <h:panelGrid columns="2" cellpadding="10">   

                        <h:outputLabel value="#{bundle['passes.make']}" />  
                        <h:outputText value="#{userWizard.addedCar.make}" />  

                        <h:outputLabel value="#{bundle['passes.model']}" />  
                        <h:outputText value="#{userWizard.addedCar.model}"/>  


                        <h:outputLabel value="#{bundle['passes.numberPlate']}" />  
                        <h:outputText value="#{userWizard.addedCar.numberPlate}"/> 
                        <h:outputLabel value="#{bundle['passes.carType']}" />  
                        <h:outputText value="#{userWizard.carTypeForUser}"/>  
                    </h:panelGrid>
                </p:panel>

                <p:panel header="Rachunek dla">
                    <h:panelGrid columns="2" cellpadding="10">   

                        <h:outputLabel value="#{bundle['accounting.name']}" />  
                        <h:outputText value="#{userWizard.addedAccountingData.name}" />  

                        <h:outputLabel value="#{bundle['accounting.city']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.city}"/>  

                        <h:outputLabel value="#{bundle['accounting.zip']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.zipNumber}"/>

                        <h:outputLabel value="#{bundle['accounting.street']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.street}"/>

                        <h:outputLabel value="#{bundle['accounting.house']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.houseNumber}"/>

                        <h:outputLabel value="#{bundle['accounting.local']}" />  
                        <h:outputText value="#{userWizard.addedAccountingData.localNumber}"/>

                        <h:outputLabel value="#{bundle['accounting.nip']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.nipNumber}"/>

                        <h:outputLabel value="#{bundle['accounting.phone']}"  />  
                        <h:outputText value="#{userWizard.addedAccountingData.phone}"/>

                        <h:outputLabel value="#{bundle['accounting.type']}"  />  
                        <h:outputText rendered="#{! empty userWizard.addedAccountingData}" value="#{userWizard.payerTypeForUser}"/>

                    </h:panelGrid>
                    <p:commandButton value="Zatwierdź" actionListener="#{userWizard.addReservation}" id="withIcon" style="width: 100%;" 
                                     update=":wiz6" action="pm:wiz6"  icon="ui-icon-disk" />  
                </p:panel>
            </pm:content>
        </pm:view>   

        <pm:view id="wiz6" >

            <pm:header title="Podsumowanie">
                <f:facet name="left"><p:button value="Wróc" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>
            <p:messages autoUpdate="true" severity="info, error"/> 
            <pm:content >
                <h:form>

                    <p:commandLink ajax="false" title="Download">  
                        <h:outputText rendered="#{not empty userWizard.fileM}" value="#{userWizard.fileDM}"/>
                        <p:fileDownload value="#{userWizard.fileDM}" />  
                    </p:commandLink>  
                    <p:commandButton value="Download" ajax="false">
                        <p:fileDownload value="#{userWizard.fileDM}" />
                    </p:commandButton>


                    <p:button value="Wróć do strony głównej" icon="home" href="/mobile/index.xhtml" styleClass="ui-btn-active ui-state-persist"/>
                </h:form>
            </pm:content>
        </pm:view>

    </ui:define>
</ui:composition>